<template>
	<view class="my-invite-view">
		<view class="bg-color"></view>
		<view class="invite-top">
			<view class="invite-title">邀请好友</view>
			<view class="invite-desc">领取专属活动奖励</view>
			<view class="invite-total">
				<view class="invite-item">
					<view class="item-tip">邀请码</view>
					<view class="item-code fx-center-between">
						<view class="code-num">{{code}}</view>
						<view class="" @click="$api.copyText(code)">复制</view>
					</view>
				</view>
				<view class="invite-item">
					<view class="item-tip" style="margin-bottom: 42rpx;">累计邀请</view>
					<view class="people-num"><text>{{total}}</text>人</view>
				</view>
			</view>

			<van-button open-type="share" block color="#FF5C00">立即邀请好友</van-button>
		</view>
		<view style="font-size: 30rpx;">邀请记录</view>
		<view class="invite-record">
			<view class="invite-list fx-center-between" v-for="(item,index) in list" :key="item.id"
				v-if="list.length>0">
				<view class="fx-center">
					<image :src="item.avatar" mode="aspectFill"></image>
					<view class="">{{item.nickname}}</view>
				</view>
				<view class="invite-time">{{item.create_time}}</view>
			</view>
			<view class="main-no-data" v-else>
				<image src="/static/no_project.png" mode="widthFix"></image>
				<view class="">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
				list: [],
				page: 1,
				total: 0,

				share_title: '',
				share_image: ''
			};
		},
		onLoad() {
			this.getInfo()
			this.getList()
			uni.hideShareMenu()
		},
		onReachBottom() {
			if (this.total < this.list.length) {
				this.page++
				this.getList()
			}
		},
		onShareAppMessage(res) {
			return {
				title: this.share_title,
				path: '/pages/index/index?inviteCode=' + this.code,
				imageUrl: this.share_image
			}

		},
		methods: {
			getInfo() {
				this.$api.requst('/gwc/user/invite_code', {}, "POST").then((res) => {
					this.code = res.data.code
					this.share_image = res.data.share_image
					this.share_title = res.data.share_title
				})
			},
			getList() {
				this.$api.requst('/gwc/user/invites', {
					page: this.page
				}).then((res) => {
					this.total = res.total
					if (this.page === 1) {
						this.list = res.data
					} else {
						res.data.forEach(item => {
							this.list.push(item)
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-invite-view {
		padding-bottom: 50rpx;
		box-sizing: border-box;
		margin: 0 24rpx;

		.bg-color {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			height: 500rpx;
			z-index: -1;
			background: linear-gradient(180deg, rgba(255, 244, 222, 1) 10%, rgba(255, 244, 222, 0));
		}

		.invite-top {
			margin: 80rpx 0 64rpx;

			.invite-title {
				font-size: 34rpx;
			}

			.invite-desc {
				font-size: 56rpx;
				font-weight: bold;
				margin-top: 8rpx;
			}

			.invite-total {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 16rpx;
				margin-top: 64rpx;
				margin-bottom: 32rpx;

				.invite-item {
					background: #FFFFFF;
					font-size: 26rpx;
					padding: 36rpx 24rpx 28rpx;

					.item-tip {
						color: #666666;
						margin-bottom: 32rpx;
					}

					.item-code {
						background: #F6F6F6;
						padding: 20rpx;

						.code-num {
							font-weight: bold;
							font-size: 34rpx;
						}
					}

					.people-num {
						font-size: 22rpx;

						text {
							font-size: 48rpx;
							font-weight: bold;
						}
					}
				}
			}
		}

		.invite-record {
			background: #ffffff;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			padding: 0 32rpx;
			margin-top: 32rpx;

			.invite-list {
				padding: 36rpx 0;
				border-bottom: 1rpx solid #E2E2E2;
				font-size: 30rpx;

				image {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}

				.invite-time {
					font-size: 26rpx;
					color: #999999;
				}
			}

			.invite-list:last-child {
				border: none;
			}
		}
	}
</style>